<template>
  <el-card header="插槽和动态插槽">
    <YsTable :data="data" :column="column">
      <template #a="{row,index}">
        row: {{row.a}} index: {{index}}<el-tag>我是一个插槽</el-tag>
      </template>
      <template #tableNameHeader="{column, $index}">
        我是头部插槽
        <el-link @click="headerSlotClick(column,$index)" type="success">点我查看作用域参数</el-link>
      </template>
      <template #menu="scope">
      {{ scope.row}}
        <el-link type="primary">我是操作插槽</el-link>
      </template>
      <template #headerMenuLeft>
        <el-button type="success">我是Header Menu Left 插槽</el-button>
      </template>
      <template #headerMenuRight>
        <el-button type="danger">我是Header Menu Right 插槽</el-button>
      </template>
      <template #createBy2Header>
        <div>
          headerSlot-slotScope
        </div>
      </template>
    </YsTable>
  </el-card>
</template>

<script setup lang="ts">
import {h, ref} from 'vue'
import type {YsTableColumn} from 'ys-crud/packages/Table/index'
import {ElMessage} from "element-plus";

interface RowType {
  a: string;
  tableChName?: string;
}

const data = ref<RowType[]>([{
  a: '12312313',
  tableChName: "表中文名称",
},{
  a: '12312313'
},{
  a: '12312313'
},{
  a: '12312313'
},{
  a: '12312313'
},{
  a: '12312313'
},{
  a: '12312313'
}])


const column = ref<Array<YsTableColumn>>([
  {label: '数据库名称', prop: 'a',slot: true},
  {label: '数据表名称', prop: 'tableName',headerSlot: true},
  {label: '表中文名称', prop: 'tableChName',formatter(row, column, cellValue) {
    return (cellValue || '-')  + 'formatter方法'
  },},
  {label: '产品线', prop: 'productName'},
  {label: '主题域', prop: 'domainName'},
  {label: '创建时间', prop: 'createTime'},
  {
    label: '创建人',
    prop: 'createBy',
    renderHeader(){
      return h('div', { class: 'my-class' }, 'renderHeader()函数渲染表头');
    }
  },
  {
    label: '创建人2',
    prop: 'createBy2',
    headerSlot: true
  }
])

const headerSlotClick = (column,index) => {
  ElMessage.success(JSON.stringify({column: column,index: index}))
}

</script>

<style lang="scss" scoped>



</style>
